<template>
  <div class="category_item">
    <div class="flex flex-between-center header">
      <span class="color-666">{{title}}</span>
      <p class="tools">
        <span
          class="pointer"
          @click="$emit('upSortItem')"
        ><i class="el-icon-top"></i></span>
        <span
          class="pointer"
          @click="$emit('downSortItem')"
        ><i class="el-icon-bottom"></i></span>
        <span
          class="pointer"
          @click="$emit('deleteItem')"
        ><i class="el-icon-delete"></i></span>
      </p>
    </div>
    <div class="input_wrapper">
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>主标题</label>
        <el-input
          placeholder="请输入主标题"
          v-model="formData.main.title"
          clearable
        >
        </el-input>
      </div>
    </div>
    <banner-form
      type="categoryForm"
      :form-data="imgData"
    ></banner-form>
    <p
      class="color-666"
      style="margin-bottom:10px"
    >二级推荐商品</p>
    <goods-link
      v-for="(item, index) in formData.goods"
      :key="item.goods_id"
      :goods-data="item"
      :show-tool="true"
      @handleDelete="deleteGoods(index)"
      @upSort="upSort(index)"
      @downSort="downSort(index)"
    ></goods-link>
    <div
      v-if="formData.goods.length < 3"
      class="add-div"
      @click="openSelect"
    >
      <i class="el-icon-plus"></i>添加商品({{formData.goods.length}}/3)
    </div>
    <goods-dialog
      ref="goodsDialog"
      :multiple="true"
      :maxNum="3"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import bannerForm from "./bannerForm";
import goodsLink from "../../../recommend/compoments/goodsLink";
import goodsDialog from "@/components/goodsDialog.vue";
export default {
  components: { bannerForm, goodsLink, goodsDialog },
  props: {
    formData: {
      type: Object,
      default: {}
    },
    title: {
      type: String
    }
  },
  watch: {
    imgData: {
      deep: true,
      handler(newVal) {
        for (let key in newVal) {
          this.formData.main[key] = newVal[key];
        }
      }
    }
  },
  mounted() {
    for (let key in this.imgData) {
      this.imgData[key] = this.formData.main[key];
    }
  },
  data() {
    return {
      imgData: {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      }
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      let item = this.formData.goods[index];
      this.$set(this.formData.goods, index, this.formData.goods[index - 1]);
      this.$set(this.formData.goods, index - 1, item);
    },
    // 降序
    downSort(index) {
      if (index === this.formData.goods.length - 1) {
        return;
      }
      let item = this.formData.goods[index];
      this.$set(this.formData.goods, index, this.formData.goods[index + 1]);
      this.$set(this.formData.goods, index + 1, item);
    },
    // 删除商品
    deleteGoods(index) {
      this.formData.goods.splice(index, 1);
    },
    // 设置选中
    setSelect(goodsList) {
      this.formData.goods = goodsList;
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = [...this.formData.goods];
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  span {
    margin-left: 10px;
    color: #666666;
  }
}
.input_wrapper {
  margin-top: 10px;
  margin-left: 0;
  & > div {
    label {
      width: 90px;
    }
  }
}
/deep/.link_val {
  margin-bottom: 15px;
}
</style>
